<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="selectOptions.goods_name" placeholder="商品名" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="plus" style="width: 120px"  @click="addGoods">添加商品</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>

        <div style="display: inline-block;float: right">
          <el-form-item>

          </el-form-item>
        </div>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table ref="multipleTable" :data="goods" v-loading="loading" border tooltip-effect="dark" style="width: 100%">
      <el-table-column label="ID" width="100" prop="id">
      </el-table-column>
      <!--<el-table-column label="农场编号" width="100" prop="farm_id">-->
      <!--</el-table-column>-->
      <el-table-column label="商品名" width="140" prop="title">
      </el-table-column>
      <el-table-column label="所属分类" width="120" prop="category_id" :formatter="cate">
      </el-table-column>
      <el-table-column label="列表图片">
        <template slot-scope="scope">
          <a :href="scope.row.list_img" target="_blank"><img :src="scope.row.list_img" alt="" style="width: 80px; height: 50px;margin-top: 2px;"></a>
        </template>
      </el-table-column>
      <!--<el-table-column label="详情图片" min-width="110">-->
          <!--<template slot-scope="scope">-->
            <!--<span style="overflow: hidden;display: inline-block;" v-for="(item, index) in scope.row.detail_img">-->
              <!--<a  :href="item.url" target="_blank" v-if="item.type == 1">-->
                <!--<img :src="item.url"  alt="" style="width: 80px; height: 50px;margin-right: 2px;margin-top: 2px;">-->
              <!--</a>-->
              <!--<div class="" v-else-if="item.type == 2" >-->
                <!--<audio :src="item.url" style="width: 80px; height: 50px;margin-right: 2px;margin-top: 2px;">-->
                  <!--您的浏览器不支持 audio 标签。-->
                <!--</audio>-->
              <!--</div>-->
            <!--</span>-->
          <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="售价（元）" prop="price" :formatter="moneyPrice">
      </el-table-column>
      <el-table-column label="标价（元）" prop="orgin_price" :formatter="moneyOrginPrice">
      </el-table-column>
      <el-table-column label="库存" width="80" prop="inventory">
      </el-table-column>
      <el-table-column label="是否在售" prop="is_sale" :formatter="isSale">
      </el-table-column>
      <el-table-column label="权重" prop="sort_order">
        <template slot-scope="scope">
          <goodsSortInput :val="scope.row.sort_order" :goods_id="scope.row.id"></goodsSortInput>
        </template>
      </el-table-column>

      <!--<el-table-column prop="create_time" label="创建时间" width="170">-->
      <!--</el-table-column>-->
      <el-table-column label="发货时间" :formatter="rule" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)" msg="scope.row">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteGoods(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>

  </section>
</template>
<script type="text/ecmascript-6">
  import util from '../../util'
  import NProgress from 'nprogress'
  import goodsSortInput from '../common/goodsSortInput'
  import {isUrlHasPurview} from '../../vuex/getters'
  import { apiTree } from '../../apiTree'

  export default {
    name: 'goods',
    // 局部注册组件
    components: {
      goodsSortInput
    },
    data() {
      return {
        goods_name: '',
        editFormVisible: false,
        loading: false,
        editLoading: false,
        seeds: [],
        total: 0,
        updatePriceShow: false,
        singlePlantData: {
          goods_name: '',
          price: 0,
          orgin_price: 0
        },
        goods: [],
        category: [],
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          goods_name: this.$route.query.goods_name !== undefined ? this.$route.query.goods_name : ''
        }
      }
    },
    methods: {
      // 商品类别
      cate(row) {
        for (let i = 0; i < this.category.length; i++) {
          if (this.category[i].id == row.category_id) {
            return this.category[i].title;
          }
        }
      },
      // 获取商品分类和品类
      getTag() {
        apiTree('goods/index', 'goods/tag').then((res) => {
          if (res.s === 1) {
            this.category = res.d.cate_data;
            NProgress.done()
          } else {
            this.$message.error(res.err_str)
          }
        })
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      // 商品售价和标价
      moneyPrice(row) {
        return (row.price / 100)
      },
      moneyOrginPrice(row) {
        return (row.orgin_price / 100)
      },
      // 是否在售
      isSale(row) {
        if (row.is_sale == 1) {
          return '在售';
        } else {
          return '已下架';
        }
      },
      // 发货周期
      rule(row) {
        console.log(row.shipping_time)
        return util.formatDate.format(new Date(row.shipping_time * 1000), 'yyyy-MM-dd')
      },
      // 获得种子列表
      getGoods() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            goods_name: ''
          }
        }
        this.loading = true
        NProgress.start()
        apiTree('goods/index', 'goods/index', para).then((res) => {
          if (res.s === 1) {
            this.total = res.d.total_num
            this.goods = res.d.data
            this.loading = false
            NProgress.done()
          }
        })
      },
      // 显示编辑界面
      handleEdit: function (_id) {
        this.$router.push('/goods/edit/id/' + _id)
      },
      // 删除种子
      deleteGoods(row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true
          NProgress.start()
          let param = {id: row.id}
          apiTree('goods/index', 'goods/delete', param).then((res) => {
            if (res.s === 1) {
              this.loading = false;
              NProgress.done()
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getGoods()
            } else {
              this.$message.error(res.err_str)
            }
          })
        }).catch(() => {})
      },
      // 刷新列表
      _reload() {
        this.getGoods();
      },
      // 增加种子
      addGoods() {
        this.$router.push('/goods/add')
      }
    },
    created() {
      this.getGoods();
      this.getTag();
      this.$on('getGoods', () => {
        this.getGoods();
      })
    },
    watch: {
      $route: 'getGoods'
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .p-pic-old
    display inline-block
    width 500px
  .pl-pic-upload
    display inline-block
    margin-left 10px
    position relative
  .p-pic-edit
    left: 175px;
    top: -44px;
    .upload_plant_pic
      display block
      width 80px
      height 35px
      cursor pointer
      position absolute
      top 0px
      right 20px
      opacity 0
      & input[type=file]
        display block
        cursor pointer
        width 80px
        height 35px
  .p-pl-poster
    width 160px
    height 80px
    margin-bottom 20px
    margin-top 0px
    & img
      width 100%
      height 100%
  .el-form-item
    margin-bottom 10px
</style>
